import {
	CAMERA_ONLINE,
	COMMUNITE_ONLINE
} from "@/common/config.js";
import {
	getDataTimes
} from "@/utils/index.js";

import {
	permissionPhotoLibrary,
	phonePermissionSetting
} from "@/utils/permission.js";
export default {
	data() {
		return {
			CAMERA_ONLINE: CAMERA_ONLINE,
			COMMUNITE_ONLINE: COMMUNITE_ONLINE,
		}
	},
	methods: {
		drawImage() {
			let that = this;
			uni.showToast({
				icon: 'loading',
				mask: true,
				duration: 10000,
				title: '图片绘制中~',
			});
			setTimeout(() => {
				var ctx = uni.createCanvasContext(
					'myCanvas', that);
				// 1.填充背景色
				ctx.setFillStyle('#fff');
				ctx.fillRect(0, 0, that.canvasW, that
					.canvasH) // fillRect(x,y,宽度，高度)

				const linearGradient = ctx.createLinearGradient(0, 0,
					that.canvasW, 190)
				// 2-2. 添加渐变颜色
				linearGradient.addColorStop(0, '#2979FF')
				linearGradient.addColorStop(1, '#1455c1')

				ctx.fillStyle = linearGradient
				// 3-2. 绘制矩形
				ctx.fillRect(0, 0, that.canvasW, 190);

				ctx.font = "bold 16px PingFangSC-Regular";
				ctx.fillStyle = '#000';
				ctx.fillText('系统开关量', 20, 220);
				ctx.save();

				ctx.drawImage('/static/image/export/up.png', that.canvasW - 35, 200, 20, 20)

				ctx.font = "bold 14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('摄像头是否在线：', 24, 250);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.comColor2(that.masterControl.param1);
				ctx.fillText(`${CAMERA_ONLINE[that.masterControl.param1] || that.masterControl.param1}`, (that
					.masterControl.param1 == 1 ? (that.canvasW - 50) : (that.canvasW - 40)), 250);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('4G是否在线：', 24, 275);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.comColor2(that.masterControl.param2);
				ctx.fillText(`${CAMERA_ONLINE[that.masterControl.param2] || that.masterControl.param2}`, (that
					.masterControl.param2 == 1 ? (that.canvasW - 50) : (that.canvasW - 40)), 275);
				ctx.save();

				ctx.font = "bold 16px PingFangSC-Regular";
				ctx.fillStyle = '#000';
				ctx.fillText('信号质量', 20, 310);
				ctx.save();

				ctx.drawImage('/static/image/export/up.png', that.canvasW - 35, 292, 20, 20)

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('信号值质量：', 24, 335);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param4;
				ctx.fillText(`${that.masterControl.param4}`, that
					.canvasW - 40, 335);
				ctx.save();

				// 硬件
				ctx.font = "bold 16px PingFangSC-Regular";
				ctx.fillStyle = '#000';
				ctx.fillText('硬件', 20, 365);
				ctx.save();

				ctx.drawImage('/static/image/export/up.png', that.canvasW - 35, 345, 20, 20)

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('仓控板得分率：', 24, 390);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param5;
				ctx.fillText(`${that.masterControl.param5}%`, that
					.canvasW - 50, 390);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('充电电源（输出继电器）得分率:', 24, 413);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param6;
				ctx.fillText(`${that.masterControl.param6}%`, that
					.canvasW - 50, 413);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('电子锁状态得分率:', 24, 435);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param7;
				ctx.fillText(`${that.masterControl.param7}%`, that
					.canvasW - 50, 435);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('格口温度得分率:', 24, 456);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param8;
				ctx.fillText(`${that.masterControl.param8}%`, that
					.canvasW - 50, 456);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('电表状态:', 24, 476);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.comColor2(that.masterControl.param3);
				ctx.fillText(`${COMMUNITE_ONLINE[that.masterControl.param3] || that.masterControl.param3}`, that
					.canvasW - 65, 476);
				ctx.save();

				// 综合
				ctx.font = "bold 16px PingFangSC-Regular";
				ctx.fillStyle = '#000';
				ctx.fillText('综合', 20, 505);
				ctx.save();

				ctx.drawImage('/static/image/export/up.png', that.canvasW - 35, 486, 20, 20)

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('柜体温度得分率：', 24, 530);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param9;
				ctx.fillText(`${that.masterControl.param9}%`, that
					.canvasW - 50, 530);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('本地仓启用率：', 24, 555);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param10;
				ctx.fillText(`${that.masterControl.param10}%`, that
					.canvasW - 50, 555);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('设备利用率：', 24, 580);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param11;
				ctx.fillText(`${that.masterControl.param11}%`, that
					.canvasW - 50, 580);
				ctx.save();

				ctx.font = "bold 16px PingFangSC-Regular";
				ctx.fillStyle = '#000';
				ctx.fillText('软件', 20, 610);
				ctx.save();

				ctx.drawImage('/static/image/export/up.png', that.canvasW - 35, 590, 20, 20)

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('主控版本：', 24, 635);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = this.comColor(1);
				ctx.fillText('是最新版本', that
					.canvasW - 80, 635);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('柜控版本：', 24, 660);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = this.comColor(1);
				ctx.fillText('是最新版本', that
					.canvasW - 80, 660);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('充电电源(充电板)版本：', 24, 685);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = this.comColor(1);
				ctx.fillText('是最新版本', that
					.canvasW - 80, 685);
				ctx.save();

				//画圆角边框
				ctx.setFontSize(36);
				ctx.setFillStyle('#ffffff');
				// ctx.setTextAlign('left');
				// var bdColor = '#ededed';
				// var bdBackground = 'transparent';
				// var bdRadius = 90;
				// var textPadding = 15;
				// var boxHeight = 80;
				// var boxWidth = 80;
				ctx.fillText(that.GRADE, that.canvasW / 2 - 30, 90);
				// console.log(ctx.measureText(that.GRADE).width)

				// that.roundRect(ctx, that.canvasW / 2 - 30, 80, boxWidth, boxHeight, bdRadius, bdBackground, bdColor)
				ctx.setFontSize(14);
				ctx.fillText('分', that.canvasW / 2 + 38, 90);

				ctx.setFontSize(16);
				ctx.fillText(`${that.deviceInfo.localName || that.deviceInfo.name}`, that.canvasW / 2 - 90,
					130);
				ctx.fillText(`报告时间：${getDataTimes()}`, that.canvasW / 2 - 110, 160);

				ctx.save();
				// draw方法 把以上内容画到 canvas 中
				ctx.draw(true, (ret) => {
					uni.showToast({
						icon: 'success',
						mask: true,
						title: '绘制完成',
					});
					// #ifdef MP-WEIXIN
					that.canvasToFilePath();
					// #endif

					// #ifndef MP-WEIXIN
					that.checkQxcz();
					// #endif
				});
			}, 1500)
		},
		drawImage2() {
			// 以下内容放接口里面---
			let that = this;
			uni.showToast({
				icon: 'loading',
				mask: true,
				duration: 10000,
				title: '图片绘制中~',
			});
			setTimeout(() => {
				var ctx = uni.createCanvasContext(
					'myCanvas', that);
				// 1.填充背景色
				ctx.setFillStyle('#fff');
				ctx.fillRect(0, 0, that.canvasW, that
					.canvasH) // fillRect(x,y,宽度，高度)

				const linearGradient = ctx.createLinearGradient(0, 0,
					that.canvasW, 190)
				// 2-2. 添加渐变颜色
				linearGradient.addColorStop(0, '#2979FF')
				linearGradient.addColorStop(1, '#1455c1')

				ctx.fillStyle = linearGradient
				// 3-2. 绘制矩形
				ctx.fillRect(0, 0, that.canvasW, 190);

				ctx.font = "bold 16px PingFangSC-Regular";
				ctx.fillStyle = '#000';
				ctx.fillText('系统开关量', 20, 220);
				ctx.save();

				ctx.drawImage('/static/image/export/up.png', that.canvasW - 35, 200, 20, 20)

				ctx.font = "bold 14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('摄像头是否在线：', 24, 250);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.comColor2(that.masterControl.param1);
				ctx.fillText(`${CAMERA_ONLINE[that.masterControl.param1] || that.masterControl.param1}`, (that
					.masterControl.param1 == 1 ? (that.canvasW - 50) : (that.canvasW - 40)), 250);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('4G是否在线：', 24, 275);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.comColor2(that.masterControl.param2);
				ctx.fillText(`${CAMERA_ONLINE[that.masterControl.param2] || that.masterControl.param2}`, (that
					.masterControl.param2 == 1 ? (that.canvasW - 50) : (that.canvasW - 40)), 275);
				ctx.save();

				ctx.font = "bold 16px PingFangSC-Regular";
				ctx.fillStyle = '#000';
				ctx.fillText('信号质量', 20, 310);
				ctx.save();

				ctx.drawImage('/static/image/export/up.png', that.canvasW - 35, 292, 20, 20)

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('信号值质量：', 24, 335);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param4;
				ctx.fillText(`${that.masterControl.param4}`, that
					.canvasW - 40, 335);
				ctx.save();

				// 硬件
				ctx.font = "bold 16px PingFangSC-Regular";
				ctx.fillStyle = '#000';
				ctx.fillText('硬件', 20, 365);
				ctx.save();

				ctx.drawImage('/static/image/export/up.png', that.canvasW - 35, 345, 20, 20)

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('整流电源得分率：', 24, 390);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param5;
				ctx.fillText(`${that.masterControl.param5}%`, that
					.canvasW - 50, 390);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('柜控电源得分率:', 24, 413);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param6;
				ctx.fillText(`${that.masterControl.param6}%`, that
					.canvasW - 50, 413);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('仓控板得分率:', 24, 435);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param7;
				ctx.fillText(`${that.masterControl.param7}%`, that
					.canvasW - 50, 435);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('充电电源（输出继电器）得分率:', 24, 456);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param8;
				ctx.fillText(`${that.masterControl.param8}%`, that
					.canvasW - 50, 456);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('电子锁状态得分率:', 24, 476);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param9;
				ctx.fillText(`${that.masterControl.param9}%`, that
					.canvasW - 50, 476);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('格口温度得分率:', 24, 496);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param10;
				ctx.fillText(`${that.masterControl.param10}%`, that
					.canvasW - 50, 496);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('电表状态:', 24, 516);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.comColor2(that.masterControl.param3);
				ctx.fillText(`${COMMUNITE_ONLINE[that.masterControl.param3] || that.masterControl.param3}`, that
					.canvasW - 65, 516);
				ctx.save();

				// 综合
				ctx.font = "bold 16px PingFangSC-Regular";
				ctx.fillStyle = '#000';
				ctx.fillText('综合', 20, 545);
				ctx.save();

				ctx.drawImage('/static/image/export/up.png', that.canvasW - 35, 527, 20, 20)

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('柜体温度得分率：', 24, 570);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param11;
				ctx.fillText(`${that.masterControl.param11}%`, that
					.canvasW - 50, 570);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('本地仓启用率：', 24, 592);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param12;
				ctx.fillText(`${that.masterControl.param12}%`, that
					.canvasW - 50, 592);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('设备利用率：', 24, 615);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = that.masterControl.param13;
				ctx.fillText(`${that.masterControl.param13}%`, that
					.canvasW - 50, 615);
				ctx.save();

				ctx.font = "bold 16px PingFangSC-Regular";
				ctx.fillStyle = '#000';
				ctx.fillText('软件', 20, 650);
				ctx.save();

				ctx.drawImage('/static/image/export/up.png', that.canvasW - 35, 632, 20, 20)

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('主控版本：', 24, 675);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = this.comColor(1);
				ctx.fillText('是最新版本', that
					.canvasW - 80, 675);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('柜控版本：', 24, 700);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = this.comColor(1);
				ctx.fillText('是最新版本', that
					.canvasW - 80, 700);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('充电电源(充电板)版本：', 24, 725);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = this.comColor(1);
				ctx.fillText('是最新版本', that
					.canvasW - 80, 725);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = '#333';
				ctx.fillText('柜控电源版本：', 24, 750);
				ctx.save();

				ctx.font = "14px PingFangSC-Regular";
				ctx.fillStyle = this.comColor(1);
				ctx.fillText('是最新版本', that
					.canvasW - 80, 750);
				ctx.save();

				//画圆角边框
				ctx.setFontSize(36);
				ctx.setFillStyle('#ffffff');
				// ctx.setTextAlign('left');
				// var bdColor = '#ededed';
				// var bdBackground = 'transparent';
				// var bdRadius = 90;
				// var textPadding = 15;
				// var boxHeight = 80;
				// var boxWidth = 80;
				ctx.fillText(that.GRADE, that.canvasW / 2 - 30, 90);
				// console.log(ctx.measureText(that.GRADE).width)

				// that.roundRect(ctx, that.canvasW / 2 - 30, 80, boxWidth, boxHeight, bdRadius, bdBackground, bdColor)
				ctx.setFontSize(14);
				ctx.fillText('分', that.canvasW / 2 + 38, 90);
				ctx.setFontSize(16);
				ctx.fillText(`${that.deviceInfo.localName || that.deviceInfo.name}`, that.canvasW / 2 - 90,
					130);
				ctx.fillText(`报告时间：${getDataTimes()}`, that.canvasW / 2 - 110, 160);
				ctx.save();
				// draw方法 把以上内容画到 canvas 中
				ctx.draw(true, (ret) => {
					uni.showToast({
						icon: 'success',
						mask: true,
						title: '绘制完成',
					});
					// #ifdef MP-WEIXIN
					that.canvasToFilePath();
					// #endif

					// #ifndef MP-WEIXIN
					that.checkQxcz();
					// #endif
				});
			}, 1500)
		},
		canvasToFilePath() {
			let that = this;
			uni.canvasToTempFilePath({
				canvasId: 'myCanvas',
				quality: 1,
				complete: (res) => {
					that.doSaveFile(res);
				},
			}, that);
		},
		doSaveFile(res) {
			let that = this;
			uni.saveFile({
				tempFilePath: res.tempFilePath,
				// filePath: `${uni.env.USER_DATA_PATH}/${that.deviceInfo.localName || that.deviceInfo.name}.png`,
				success(saveRes) {
					// saveRes.savedFilePath 为保存后的文件路径
					uni.setStorageSync('filePath', saveRes.savedFilePath) //保存临时文件路径到缓存
					setTimeout(() => {
						that.saveImage();
					}, 300)
				},
				fail(error) {
					console.error('文件保存失败:', error);
					that.$Toast.none('文件保存失败!');
				}
			});
		},
		// 判断有没有存储权限
		checkQxcz() {
			let that = this;
			const iosFirstOpenLibrary = uni.getStorageSync('SET_IOS_FIRST_OPEN_LIBRARY')
			if (uni.getSystemInfoSync().platform === 'ios' && !iosFirstOpenLibrary) {
				//把判断ios这个变量置为false
				uni.setStorageSync('SET_IOS_FIRST_OPEN_LIBRARY', true);
				that.canvasToFilePath();
			} else {
				permissionPhotoLibrary().then(res => {
					that.canvasToFilePath();
				}).catch(err => {
					uni.showModal({
						title: '手机权限',
						content: err,
						success: function(res) {
							if (res.confirm) {
								phonePermissionSetting()
							} else if (res.cancel) {}
						}
					});
				})
			}
		},
		// 获取图片信息
		getImageInfo(image) {
			return new Promise((req, rej) => {
				uni.getImageInfo({
					src: image,
					success: function(res) {
						req(res)
					},
				});
			})
		},

		// 获取设备信息
		getSystemInfo() {
			return new Promise((req, rej) => {
				uni.getSystemInfo({
					success: function(res) {
						req(res)
					}
				});
			})
		},

		// 保存图片到相册
		saveImage() {
			let filePath = uni.getStorageSync('filePath') //从缓存中读取临时文件路径		
			uni.saveImageToPhotosAlbum({
				filePath: filePath,
				success() {
					uni.showToast({
						title: '图片保存成功',
						icon: 'none'
					})
				},
				fail(e) {
					uni.showToast({
						title: '图片保存失败',
						icon: 'none'
					})
				}
			})
		},

		comColor(item) {
			if (item == 0) {
				return '#f56c6c';
			} else if (item == 1) {
				return '#19be6b'
			}
			return "";
		},
		comColor2(item) {
			if (item == 1) {
				return '#f56c6c';
			} else if (item == 0) {
				return '#19be6b'
			}
			return "";
		},

	}
}